<template>
  <div>
    <s-header :name="'生成订单'"></s-header>
    <div class="address-wrap">
      <div class="name" @click="goTo">
        <span>{{ address.userName }} </span>
        <span>{{ address.userPhone }}</span>
      </div>
      <div class="address">
        {{ address.provinceName }} {{ address.cityName }} {{ address.regionName }} {{ address.detailAddress }}
      </div>
      <van-icon class="arrow" name="arrow" />
    </div>
  </div>
</template>

<script>
  import sHeader from '../../components/Header.vue'
  import {
    reactive,
    onMounted,
    toRefs,
    computed
  } from 'vue'
  import {
    Toast
  } from 'vant'
  import {
    useRoute,
    useRouter
  } from 'vue-router'
  export default {
    components: {
      sHeader
    },
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      cartList: [],
      address: {},
      showPay: false,
      orderNo: '',
      cartItemIds: []
    })

    onMounted(() => {
      init()
    })

    const init = async () => {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      const {
        addressId,
        cartItemIds
      } = route.query
      const _cartItemIds = cartItemIds ? JSON.parse(cartItemIds) : JSON.parse(getLocal('cartItemIds'))
      console.log('cartItemIds', cartItemIds)
      setLocal('cartItemIds', JSON.stringify(_cartItemIds))
      const {
        data: list
      } = await getByCartItemIds({
        cartItemIds: _cartItemIds.join(',')
      })
      const {
        data: address
      } = addressId ? await getAddressDetail(addressId) : await getDefaultAddress()
      if (!address) {
        router.push({
          path: '/address'
        })
        return
      }
      state.cartList = list
      state.address = address
      Toast.clear()
    }
  }
</script>

<style lang="less" scoped>
  .address-wrap {
    margin-bottom: 20px;
    background: #fff;
    position: relative;
    font-size: 14px;
    padding: 15px;
    color: #222333;

    .name,
    .address {
      margin: 10px 0;
    }

    .arrow {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: 80px;
      content: '';
    }
  }
</style>